<template>
  <div class="dialog-container">
    <el-dialog
      title="预览文件"
      :visible="dialogVisible"
      @open="initData"
      @close="closeDialog"
    >
      <div>
        <!-- <pdf
          v-if="type==='pdf'"
          ref="pdf"
          :src="fileUrl"
          :page="currentPage"
          @num-pages="pageCount = $event"
          @page-loaded="currentPage = $event"
          @loaded="loadPdfHandler"
        />
        <div
          v-else-if="type === 'jpg' || type === 'png'"
        >
          <img :src="fileUrl" alt="图片">
        </div> -->
        <iframe :src="fileUrl" frameborder="0" style="width: 100%; height: 450px" />
        <div class="pagination-container">
          <el-pagination
            small
            layout="prev, pager, next, total"
            :total="pageCount"
            :current-page.sync="currentPage"
            :page-size.sync="pageSize"
            :hide-on-single-page="true"
            @current-change="changePdfPage"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  name: 'PreviewFileDialog',
  components: {
    pdf
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    obj: {
      type: Object,
      default: null
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      pageSize: 1,
      currentPage: 1,
      pageCount: 1,
      pdfLoading: false,
      fileUrl: 'http://47.108.114.62:8080/static-view'
    }
  },
  created() {},
  mounted() {},
  methods: {
    initData() {
      this.fileUrl = this.fileUrl + this.obj.enclosureUrl
      if (this.type === 'docx') {
        this.fileUrl = 'http://view.xdocin.com/xdoc?_xdoc=' + this.fileUrl
      }
    },
    // pdf分页
    changePdfPage(val) {
      this.currentPage = val
    },
    // pdf加载时
    loadPdfHandler(e) {
      // 加载的时候先加载第一页
      this.currentPage = 1
    },
    closeDialog() {
      this.fileUrl = '/static-view'
      this.$emit('closeDialog')
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
